<template name="ArticleShow">
	<view class="article_main" @click="clickItem">
		<!-- 图片 -->
		<view class="article_image">
			<image :src="item.url" mode="" style="height: 100%;width: 100%;"></image>
			<view class="article_item_tag_main">
				<ItemTag v-show="item.tags && item.tags.length > 0" v-for="data in item.tags" :item="data"
					class="article_item_tag" :isWhite="true" />
			</view>
		</view>

		<!-- 描述 -->
		<view class="article_desc">{{item.des}}</view>

		<!-- 日期和人数 -->
		<view class="article_footer">
			<text class="article_date">{{item.date}}</text>
			<text class="article_count">{{`${item.count}人阅读`}}</text>
		</view>
	</view>
</template>

<script>
	import ItemTag from '@/components/ItemTag.vue'
	export default {
		name: "ArticleShow",
		data() {
			return {};
		},
		methods: {
			clickItem: function() {
				this.$emit("click", this.item);
			}
		},
		props: ["item"],
	}
</script>

<style>
	.article_main {
		width: 100%;
		height: 600rpx;
		box-sizing: border-box;
		padding: 10rpx 30rpx;
		position: relative;
	}

	.article_image {
		width: 100%;
		height: 65%;
		position: relative;
	}

	.article_desc {
		margin-top: 10rpx;
		font-size: 16px;
		font-weight: 600;
	}

	.article_footer {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.article_footer>text {
		color: #8f9199;
		font-size: 14px;
	}

	.article_item_tag_main {
		position: absolute;
		z-index: 100;
		bottom: 20rpx;
		width: 100%;
		height: 40rpx;
		display: flex;
		flex-wrap: nowrap;
		overflow: hidden;
		padding-left: 20rpx;
	}
</style>
